Dislaimer | Kontakt | Sitemap

Hintergrund

 
 

CSS Selektoren


* Sternsymbol

* {
 margin: 0;
 padding: 0;
}
Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab. Viele Entwickler werden diesen Trick verwenden, um die margin und das padding auf Null zu setzen. Während dies für schnelle Tests sicherlich gut ist, würde ich Ihnen raten, dies nie im Produktionscode zu verwenden. Es fügt dem Browser zu viel Gewicht hinzu und ist unnötig.
Das * kann auch mit Kinderselektoren verwendet werden.
#container * {
 border: 1px dotted black;
}
Dies zielt auf jedes einzelne Element ab, das ein Kind des #container div ist. Versuchen Sie es auch diesmal nicht, diese Technik zu benutzen.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
* 4.0 7.0 2.0 3.1 9.6

# Raute

#container {
   width: 960px;
   margin: auto;
}
Indem wir das Hash-Symbol einem Selektor vorsetzen, können wir nach ID verweisen. Dies ist leicht die am häufigsten verwendete Verwendung. Aber vorsichtig, wenn Sie ID-Selektoren verwenden.
Fragen Sie sich selbst: Muss ich unbedingt eine ID auf dieses Element anwenden, um darauf zu verweisen?
ID-Selektoren sind starr und erlauben keine Wiederverwendung. Wenn möglich, versuchen Sie zunächst, einen Tag-Namen, eines der neuen HTML5-Elemente oder sogar eine Pseudo-Klasse zu verwenden.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
#id JA JA JA JA JA

. Punkt

.error {
  color: red;
}
Dies ist ein class-Selektor. Der Unterschied zwischen IDs und class besteht darin, dass Sie mit letzterem mehrere Elemente gezielt ansprechen können. Verwenden Sie class, wenn Sie möchten, dass Ihr Styling auf eine Gruppe von Elementen angewendet wird. Verwenden Sie alternativ IDs, um eine Nadel im Heuhaufen zu finden, und formatieren Sie nur dieses spezifische Element.
Der class-selektor wählt Elemente mit einem bestimmten class-attribut aus.
Um Elemente mit einer bestimmten class auszuwählen, schreiben Sie ein Punktzeichen (.) Gefolgt vom Namen der Klasse.
Sie können auch festlegen, dass nur bestimmte HTML-Elemente von einer class betroffen sein sollen. Beginnen Sie dazu mit dem Elementnamen und schreiben Sie dann das Punktzeichen (.) Gefolgt vom Namen der class.
HTML-Elemente können sich auch auf mehrere class beziehen.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
.class JA JA JA JA JA

X Y Element nach Element auswählen.

li a {
  text-decoration: none;
}
Der nächste Kommentar-Selektor ist der Nachfahren-Selektor. Wenn Sie mit Ihren Selektoren spezifischer sein müssen, verwenden Sie diese. Was ist zum Beispiel, wenn Sie nicht auf alle Anker-Tags abzielen, sondern nur auf die Anker, die sich in einer ungeordneten Liste befinden? Dies ist insbesondere der Fall, wenn Sie einen Selektor für Nachkommen verwenden.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
element element JA JA JA JA JA

X Die Elementauswahl wählt alle Elemente mit dem angegebenen Elementnamen aus.

a { color: red; }
ul { margin-left: 0; }
Was ist, wenn Sie alle Elemente auf einer Seite nach ihrem Typ und nicht nach einer ID oder einem class-namen ausrichten möchten? Halten Sie es einfach und verwenden Sie eine Typenauswahl. Wenn Sie alle ungeordneten Listen als Ziel verwenden möchten, verwenden Sie ul {}.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
element JA JA JA JA JA

X:visited und X:link Der Link-Selektor wird verwendet, um nicht besuchte Links auszuwählen.

a:link { color: red; }
a:visted { color: purple; }
Wir verwenden die Pseudo-Klasse :link, um auf alle Anker-Tags zu zielen, auf die noch geklickt werden muss.
Alternativ dazu haben wir auch die Pseudoklasse :visited, mit der Sie, wie Sie es erwartet haben, ein spezifisches Styling nur auf die Anchor-Tags auf der Seite anwenden können, auf die geklickt oder die Sie besucht haben.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:link 4.0 7.0 2.0 3.1 9.6

X + Y Element Y, wenn es direkt nach X vorkommt

ul + p {
   color: red;
}
Dies wird als angrenzender Selektor bezeichnet. Es wird nur das Element ausgewählt, dem das vorherige Element unmittelbar vorangeht. In diesem Fall hat nur der erste ul nach jeder Zeile einen roten Text.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
element+element JA 7.0 JA JA JA

X > Y Element Y, wenn es direkt innerhalb von X vorkommt.

div#container > ul {
  border: 1px solid black;
}
Der Unterschied zwischen dem Standard X Y und X > Y ist, dass letzterer nur direkte Kinder auswählt. Betrachten Sie zum Beispiel das folgende Markup.

   
    
      
  •  List Item
        
      
           
    •  Child 
      • 
        
    
      
    • 
      
  •  List Item 
    • 
      
  •  List Item 
    • 
      
  •  List Item 
    •
Ein Selektor von #container > ul zielt nur auf die ul ab, die direkte Kinder des div mit einer ID des Containers sind. Es wird zum Beispiel nicht auf die ul abzielen, die ein Kind der ersten li ist.
Aus diesem Grund gibt es Leistungsvorteile bei der Verwendung des Kindkombinators. In der Tat wird es besonders empfohlen, wenn Sie mit JavaScript-basierten CSS-Selektor-Engines arbeiten.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
element>element JA 7.0 JA JA JA

X ~ Y Element Y, wenn davor X vorkommt 

ul ~ p {
   color: red;
}
Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng. Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der vorherige Selektor unmittelbar vorausgeht, ist dieser allgemeiner verallgemeinert. Es wird, in Bezug auf unser Beispiel oben, beliebige p Elemente auswählen, solange sie einer ul folgen.
Der Selektor Element1 ~ Element2 vergleicht das Vorkommen von Element2, dem Element1 vorangestellt ist.

Beide Elemente müssen dasselbe Elternelement haben, aber Element2 muss nicht direkt von Element1 vorangestellt werden.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
element1~element2 4.0 7.0 3.5 3.2 9.6

X[title] Element bei dem das Attribute title gesetzt ist.

a[title] {
   color: green;
}
In unserem obigen Beispiel wird dies als Attributselektor bezeichnet. Dabei werden nur die Anker-Tags ausgewählt, die über ein title-attribut verfügen. Anchor-Tags, die dieses bestimmte Styling nicht erhalten.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
[attribute] 4.0 7.0 2.0 3.1 9.6

X[href="foo"] Attribut href hat den Wert foo

a[href="http://www.williseiler.ch"] {
  color: #1f6053; /* Gitter grün */
}
Das obige Snippet formatiert alle Anker-Tags, die auf http://www.williseiler.ch verlinken sind. Sie erhalten unsere grüne Gitterfarbe. Alle anderen Anker-Tags bleiben davon unberührt.
Beachten Sie, dass wir den Wert in Anführungszeichen setzen. Denken Sie daran, dies auch bei Verwendung einer JavaScript-CSS-Selektor-Engine zu tun. Verwenden Sie nach Möglichkeit immer CSS3-Selektoren über inoffizielle Methoden.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
[attribute] 4.0 7.0 3.5 3.2 9.6

X[href^="http"] Attribut href beginnt mit http.

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}
Haben Sie sich jemals gewundert, wie einige Websites ein kleines Symbol neben den externen Links anzeigen können? Ich bin mir sicher, dass du das schon mal gesehen hast; Sie erinnern uns daran, dass der Link Sie auf eine völlig andere Website führt.

Dies ist ein Kinderspiel mit dem Karat-Symbol. Es wird am häufigsten in regulären Ausdrücken verwendet, um den Anfang einer Zeichenfolge festzulegen. Wenn wir alle Anchor-Tags mit einem href markieren möchten, der mit http beginnt, könnten wir einen Selector verwenden, der dem oben gezeigten Snippet ähnelt.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
[attribute^=value] 4.0 7.0 3.5 3.2 9.6

X[data-*="foo"] Attribut enthält teil foo

a[data-filetype="image"] {
   color: red;
}
Wie kompensieren wir all die verschiedenen Bildtypen: png, jpeg, jpg, gif? Nun, wir könnten mehrere Selektoren erstellen, wie zum Beispiel:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}
Aber das ist ein Schmerz in den Hintern und ist ineffizient. Eine andere mögliche Lösung ist die Verwendung benutzerdefinierter Attribute. Was wäre, wenn wir jedem Anker, der auf ein Bild verweist, unser eigenes Attribut "Dateityp" hinzufügen?
 Image Link
Mit diesem Haken können wir dann einen Standardattribut-Selektor verwenden, um nur auf diese Anker zu zielen.
a[data-filetype="image"] {
   color: red;
}
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
[attribute*=value] 4.0 7.0 3.5 3.2 9.6

X[foo~="bar"] Element suchen mit dem Wortteil bar

a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}
Hier ist eine spezielle, die deine Freunde beeindrucken wird. Nicht viele Leute kennen diesen Trick. Das Symbol tilda (~) ermöglicht es uns, ein Attribut mit einer durch Leerzeichen getrennten Liste von Werten anzusteuern.

Zusammen mit unserem benutzerdefinierten Attribut könnten wir ein Data-Info-Attribut erstellen, das eine durch Leerzeichen getrennte Liste von Daten erhält, die wir notieren müssen. In diesem Fall werden wir externe Links und Links zu Bildern beachten - nur für das Beispiel.
 Klick mich
Mit diesem Markup können nun alle Tags mit einem dieser Werte mithilfe des Trickattributs ~ attributes ausgewählt werden.
/* Target data-info attr das enthält den Wert "external" */
a[data-info~="external"] {
   color: red;
}

/* Und die den Wert enthalten "image" */
a[data-info~="image"] {
  border: 1px solid black;
}
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
[attribute*=value] 4.0 7.0 2.0 3.1 9.6

X:checked Zustand des Elementes ist ausgewählt

input[type=radio]:checked {
   border: 1px solid black;
}
Diese Pseudoklasse zielt nur auf ein Benutzeroberflächenelement, das überprüft wurde - wie ein Optionsfeld oder ein Kontrollkästchen. So einfach ist das.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:cheked 4.0 9.0 3.5 3.2 9.6

X:after Text der nach dem Element ausgegeben wird

Die before und after-Pseudo-Klassen treten hin. Jeden Tag scheinen die Menschen neue und kreative Wege zu finden, sie effektiv zu nutzen. Sie erzeugen einfach Inhalt um das ausgewählte Element herum.

Viele wurden zuerst in diese Klassen eingeführt, als sie auf den Clear-Fix-Hack stiessen.
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}
Dieser Hack verwendet die Pseudo-Klasse nach: Nach dem Element ein Leerzeichen anfügen und dann löschen. Es ist ein ausgezeichneter Trick in Ihrer Werkzeugtasche, besonders in den Fällen, wenn der Überlauf: versteckt; Methode ist nicht möglich.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
::after 4.0 9.0 3.5 3.1 7.0

X:hover Mauszeiger liegt über dem Element

div:hover {
  background: #e3e3e3;
}
Mit dem :hover-Selektor werden Elemente ausgewählt, wenn Sie mit der Maus darüber fahren.

Tip: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.

Tip: Verwenden Sie den Link-Selektor zum Stylen von Links zu nicht besuchten Seiten, den Selektor :hover, um Links zu besuchten Seiten zu stylen, und den Selektor :aktiv, um den aktiven Link zu formatieren.

Hinweis: :hover MUSS nachher kommen :link und :hover (wenn sie vorhanden sind) in der CSS-Definition, um effektiv zu sein!
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:hover 4.0 7.0 2.0 3.1 9.6

X:not Mauszeiger liegt über dem Element

div:not(#container) {
   color: blue;
}
Die Pseudoklasse Negation ist besonders hilfreich. Nehmen wir an, ich möchte alle divs auswählen, ausser dem, der eine ID des Containers hat. Das obige Snippet wird diese Aufgabe perfekt erledigen.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:not() 4.0 9.0 3.5 3.2 9.6

X::first-line Erste Textzeile eines Absatzes

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}
Der Selektor der ::first-line wird verwendet, um der ersten Zeile des angegebenen Selektors einen Stil hinzuzufügen.
Damit dieser Selektor in IE 5.5-8 funktioniert, müssen Sie die alte CSS2-Syntax mit einem Doppelpunkt angeben (:first-line Anstatt von ::first-line).
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
::first-line 1.0 9.0 1.0 1.0 7.0

X::first-letter Erstes Schriftzeichen eines Absatzes

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}
Der Selektor ::first-letter wird verwendet, um dem ersten Buchstaben des angegebenen Selektors einen Stil hinzuzufügen.

Hinweis: Der Selektor ::first-letter für den ersten Buchstaben kann nur mit Elementen auf Blockebene verwendet werden.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
::first-line 1.0 9.0 1.0 1.0 7.0

X:first-child Element ist das Erste seines Elternelementes

ul li:first-child {
   border-top: none;
}
Der Selektor :first-child wird nur zum Auswählen des angegebenen Selektors verwendet, wenn es das erste untergeordnete Element des übergeordneten Elements ist.

Diese strukturelle Pseudoklasse ermöglicht es uns, nur auf das erste Kind des Elternelements des Elements zu zielen. Sie verwenden dies häufig, um Rahmen aus dem ersten und letzten Listenelement zu entfernen.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:first-child 4.0 7.0 3.0 3.1 9.6

X:nth-child() Element ist das n. Kindelement.

li:nth-child(3) {
   color: red;
}
Der Selektor :nth-child(n) stimmt mit jedem Element überein, das das n-te untergeordnete Element unabhängig von seinem Typ ist.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Tip: Sehen Sie sich den Auswahlpunkt :nth-of-type() an, um das Element auszuwählen, das das n-te Kind eines bestimmten Typs des übergeordneten Elements ist.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:nth-child() 4.0 9.0 3.5 3.2 9.6

X:nth-last-child(n) Element ist das letzte n. Kindelement.

li:nth-last-child(2) {
   color: red;
}
Der Selektor :nth-last-child(n) stimmt mit jedem Element überein, das das n-te Kind unabhängig vom Typ des übergeordneten Elements ist und vom letzten Kind zählt.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Tipp: Sehen Sie sich die Auswahloption :nth-last-of-type() an, um das Element auszuwählen, das das n-te Kind eines bestimmten Typs des übergeordneten Elements ist und vom letzten Kind zählt.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:nth-last-child() 4.0 9.0 3.5 3.2 9.6

X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}
Es gibt Zeiten, in denen Sie anstatt ein Kind auszuwählen, stattdessen nach dem Typ des Elements auswählen müssen.
Der Selektor :n-Typ(n) stimmt mit jedem Element überein, das das n-te Kind eines bestimmten Typs seines übergeordneten Elements ist.

Tipp: Sehen Sie sich die Auswahloption :nth-child() an, um das Element auszuwählen, das das n-te untergeordnete Element unabhängig von seinem Typ ist.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:nth-of-type() 4.0 9.0 3.5 3.2 9.6

X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}
Und ja, um konsistent zu bleiben, können wir auch nth-last-of-type verwenden, um am Ende der Selectors-Liste zu beginnen und unseren Weg zurück zum Ziel des gewünschten Elements zu gehen.

Tipp: Sehen Sie sich die Auswahloption :nth-last-child() an, um das Element auszuwählen, das das n-te Kind unabhängig vom Typ des übergeordneten Elements ist und vom letzten untergeordneten Element zählt.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:nth-last-of-type() 4.0 9.0 3.5 3.2 9.6

X:last-child Element ist das Letze seines Elternelementes

ul > li:last-child {
   color: green;
}
Das Gegenteil von :first-child, :last-child wird auf das letzte Element des Elternelements des Elements ausgerichtet.

Der :last-child -Selektor entspricht jedem Element, das das letzte untergeordnete Element des übergeordneten Elements ist.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:last-child 4.0 9.0 3.5 3.2 9.6

X:only-child einzelnes Element, das kein gleiches besitzt

div p:only-child {
   color: red;
}
Der :only-child-Selektor stimmt mit jedem Element überein, das das einzige Kind seines Elternelements ist.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:only-child 4.0 9.0 3.5 3.2 9.6

X:only-of-type einzelnes Element, das kein gleichrangiges Element des gleichen Typs besitzt

li:only-of-type {
   font-weight: bold;
}
Diese strukturelle Pseudoklasse kann auf einige clevere Arten verwendet werden. Es zielt auf Elemente ab, die keine Geschwister innerhalb des übergeordneten Containers haben. Lassen Sie uns als Beispiel auf alle uls zielen, die nur ein einzelnes Listenelement haben.

Der Selektor :only-of-type stimmt mit jedem Element überein, das das einzige Kind seines Typs und seines übergeordneten Elements ist.
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:only-of-type 4.0 9.0 3.5 3.2 9.6

X:first-of-type Erstes Element desselben Typs

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}
Dieses Snippet sagt im Wesentlichen: "Suchen Sie die erste ungeordnete Liste auf der Seite und suchen Sie dann nur die unmittelbaren Kinder, die Listenelemente sind. Als nächstes filtern Sie das auf nur das zweite Listenelement in diesem Set herunter.
p + ul li:last-child {
   font-weight: bold;
}
In diesem Szenario finden wir die ul, die sofort das p-Tag weitergeht und dann das allerletzte Kind des Elements findet.
p + ul li:last-child {
   font-weight: bold;
}
Diesmal nehmen wir die erste ul auf der Seite und finden dann den allerersten Listenpunkt, aber von unten beginnend!

Der Selektor :first-of-type stimmt mit jedem Element überein, das das erste untergeordnete Element eines bestimmten Typs des übergeordneten Elements ist.
Tipp: Dies ist das Gleiche wie :n-Typ(1).
Beispiel
Browser Support
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
 
Selector
:first-of-type 4.0 9.0 3.5 3.2 9.6